<template>
    <div class="tags" v-if="showTags">
        <ul>
            <li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
                <router-link :to="item.path" class="tags-li-title">
                    {{item.title}}
                </router-link>
                <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
            </li>
        </ul>
        <div class="tags-close-box">
            <el-dropdown @command="handleTags">
                <el-button size="mini" type="primary">
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu size="small" slot="dropdown">
                    <el-dropdown-item command="other">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="all">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
    import bus from './bus';
    export default {
        data() {
            return {
                tagsList: []
            }
        },
        methods: {
            isActive(path) {
                return path === this.$route.fullPath;
            },
            // 关闭单个标签
            closeTags(index) {
                const delItem = this.tagsList.splice(index, 1)[0];
                const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
                if (item) {
                    delItem.path === this.$route.fullPath && this.$router.push(item.path);
                }else{
                    this.$router.push('/');
                }
            },
            // 关闭全部标签
            closeAll(){
                this.tagsList = [];
                this.$router.push('/');
            },
            // 关闭其他标签
            closeOther(){
                const curItem = this.tagsList.filter(item => {
                    return item.path === this.$route.fullPath;
                })
                this.tagsList = curItem;
            },
            // 设置标签
            setTags(route){
                const isExist = this.tagsList.some(item => {
                    return item.path === route.fullPath;
                })
                if(!isExist){
                    if(this.$store.state.app.device.width>1600){
                        if(this.tagsList.length >= 6){
                            this.tagsList.shift();
                        }
                    }else if(this.$store.state.app.device.width<1400){
                        if(this.tagsList.length >= 6){
                            this.tagsList.shift();
                        }
                    }else{
                        if(this.tagsList.length >= 8){
                            this.tagsList.shift();
                        }
                    }
                    // if(route.matched[1]){
                    //     this.tagsList.push({
                    //         title: route.meta.title,
                    //         path: route.fullPath,
                    //         // name: route.matched[1].components.default.name
                    //         name: route.matched[1].components.name
                    //     })
                    // }
                    if(route.matched[1]&&route.matched[1].components.default){
                        this.tagsList.push({
                            title: route.meta.title,
                            path: route.fullPath,
                            name: route.matched[1].components.default.name
                        })
                    }
                }
                bus.$emit('tags', this.tagsList);
            },
            handleTags(command){
                command === 'other' ? this.closeOther() : this.closeAll();
            }
        },
        computed: {
            showTags() {
                return this.tagsList.length > 0;
            }
        },
        watch:{
            $route(newValue, oldValue){
                this.setTags(newValue);
            }
        },
        created(){
            this.setTags(this.$route);
            // 监听关闭当前页面的标签页
            bus.$on('close_current_tags', () => {
                for (let i = 0, len = this.tagsList.length; i < len; i++) {
                    const item = this.tagsList[i];
                    if(item.path === this.$route.fullPath){
                        if(i < len - 1){
                            this.$router.push(this.tagsList[i+1].path);
                        }else if(i > 0){
                            this.$router.push(this.tagsList[i-1].path);
                        }else{
                            this.$router.push('/');
                        }
                        this.tagsList.splice(i, 1);
                    }
                }
            })
        }
    }

</script>


<style  lang="scss">
    .tags {
        position: relative;
        height: 36px;
        padding-bottom: 20px;
        overflow: hidden;
        background: linear-gradient(#ededed,#f8f8f8);
        /*padding-right: 120px;*/
        /*box-shadow: 0 5px 10px #ddd;*/
        /*padding-bottom: 20px;*/
    }

    .tags ul {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }

    .tags-li {
        position:relative;/* *  */
        float:left;
        padding: 0px 0px 0px 5px;
        z-index: 2;
        height: 36px;
        line-height: 36px;
        color: #999999;
        margin-right: 60px;
        .tags-li-icon{
            cursor: pointer;
        }
        a{
            padding-right: 30px;
        }
        &:before{
            content: ' ';/* *  */
            position: absolute;/* *  */
            top:0;
            right:0;
            bottom:0;
            left:0;
            z-index:-1;
            background-image:linear-gradient(hsla(0,0%,100%,.6),
                    hsla(0,0%,100%,0));
            border-bottom:none;
            /*border-radius:.5em .5em 0 0;*/
            box-shadow: 0px 2px 3px #e9e9e9;
            transform: perspective(10px) rotateX(-5deg);/* *  */
            transform-origin:bottom;
            box-sizing: content-box;
            background-color:#fff;/* *  */
            -webkit-transition: all .3s ease-in;
            -moz-transition: all .3s ease-in;
            transition: all .3s ease-in;
            border-color: #fff;
        }
            /* z-index:1; */
        /*margin: 3px 5px 2px 3px;*/
        /*border-radius: 3px;*/
        /*font-size: 12px;*/
        /*overflow: hidden;*/
        /*cursor: pointer;*/
        /*height: 23px;*/
        /*line-height: 23px;*/
        /*border: 1px solid #e9eaec;*/
        /*background: #fff;*/
        /*padding: 0 5px 0 12px;*/
        /*vertical-align: middle;*/
        /*color: #666;*/

        &:nth-child(1){
            margin-left:40px;
       }
    }

    .tags-li:not(.active):hover {
        background: #f8f8f8;
    }

    .tags-li.active {
        color: #fff;
        .el-icon-close{
            color: #999;
        }
    }

    .tags-li-title {
        float: left;
        max-width: 80px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 5px;
        color: #666;
    }

    .tags-li.active .tags-li-title {
        color: #b71a00;
    }

    .tags-close-box {
        cursor: pointer;
        position: absolute;
        right: 24px;
        top: 50%;
        margin-top: -20px;
        text-align: center;
        width: 26px;
        height: 26px;
        z-index: 10;
        .el-button--primary{
            display: inline-block;
            width: 26px;
            height: 26px;
            background: white;
            border: 1px solid #eeeeee;
            border-radius: 2px;
            padding: 0;
            .el-icon--right{
                color: #ddd;
                margin-left: 0;
                font-size: 14px;
                position: relative;
                /deep/ &:before{
                    content: '';
                }
                &:after{
                    content: '';
                    position: absolute;
                    right: 0px;
                    top:50%;
                    width: 14px;
                    height: 8px;
                    margin-top: -4px;
                    // background-image: url("../../../static/images/dropdown.png");
                    background-repeat: no-repeat;
                    background-position: center;

                }
            }
        }
    }
    #app   .content-box .tags-close-box .el-button--primary{
        background: white;
        border-color:white ;
    }
    @media screen and (max-width: 1400px){
        .tags-li{
            margin-right: 40px;
        }
    }
</style>
